<!--
 * @Autor: dingxiaolin
 * @Date: 2021-03-08 10:32:18
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-03-08 15:19:49
-->
<template>
    <div class="btnGroup fixed">
        <slot></slot>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import throttle from 'throttle-debounce/throttle';
@Component
export default class ButtonGroup extends Vue {
    isBottom = false;
    throttledScrollHandler = null;
    mounted() {
        const el = document.querySelector('.el-main') as any;
        this.throttledScrollHandler = throttle(300, this.onScroll);
        el.addEventListener('scroll', this.throttledScrollHandler);
        // this.$nextTick(() => {
        //     const el = document.querySelector('.el-main') as any;
        //     const offsetHeight = el.offsetHeight;
        //     el.onscroll = () => {
        //         const scrollTop = el.scrollTop;
        //         const scrollHeight = el.scrollHeight;
        //         // console.log('offsetHeight', offsetHeight);
        //         // console.log('scrollTop', scrollTop);
        //         // console.log('scrollHeight', scrollHeight);
        //         console.log('ss', offsetHeight + scrollTop - scrollHeight);
        //         if (offsetHeight + scrollTop - scrollHeight == 0) {
        //             // 需要执行的代码
        //             console.log('已滚动到底部');
        //             this.isBottom = true;
        //         } else {
        //             this.isBottom = false;
        //         }
        //     };
        // });
    }
    onScroll() {
        const el = document.querySelector('.el-main') as any;
        console.log('el.scrollTop', el.scrollTop + el.offsetHeight - el.scrollHeight);
        if (el.scrollTop + el.offsetHeight - el.scrollHeight == 0) {
            this.isBottom = true;
        } else {
            this.isBottom = false;
        }
    }
}
</script>

<style lang="scss" scoped>
</style>